<template>
  <div class="shengmu base-background-img">
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/youxiaoxianjie/home/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/youxiaoxianjie/home/right.png">
    </div>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
  import shengmu1 from './shengmu/shengmu1'
  import shengmu2 from './shengmu/shengmu2'
  import shengmu3 from './shengmu/shengmu3'
  import shengmu4 from './shengmu/shengmu4'
  import shengmu5 from './shengmu/shengmu5'
  import shengmu6 from './shengmu/shengmu6'
  import shengmu7 from './shengmu/shengmu7'
  export default {
    name: 'shengmu',
    data () {
      return {
        currentIndex: 1,
        currentView: 'youxiao-shengmu1'
      }
    },
    components: {
      'youxiao-shengmu1': shengmu1,
      'youxiao-shengmu2': shengmu2,
      'youxiao-shengmu3': shengmu3,
      'youxiao-shengmu4': shengmu4,
      'youxiao-shengmu5': shengmu5,
      'youxiao-shengmu6': shengmu6,
      'youxiao-shengmu7': shengmu7
    },
    created () {
      let that = this
      that.currentView = 'youxiao-shengmu1'
      if (that.$route.query.compoentchild === '') {
        that.currentView = 'youxiao-shengmu1'
      } else if (that.$route.query.compoentchild !== undefined) {
        that.currentView = that.$route.query.compoentchild
        this.currentIndex = parseInt(that.$route.query.compoentchild.substr(-1))
      }
    },
    methods: {
      toggleTabs: function (func) {
        if (func === 'add') {
          if (this.currentView !== 'youxiao-shengmu7') {
            this.currentIndex = this.currentIndex + 1
            this.currentView = 'youxiao-shengmu' + this.currentIndex
          }
        } else {
          if (this.currentView !== 'youxiao-shengmu1') {
            this.currentIndex = this.currentIndex - 1
            this.currentView = 'youxiao-shengmu' + this.currentIndex
          }
        }
      }
    }
  }
</script>

<style scoped>

.shengmu > div {
  position: absolute; 
}
.left {
  z-index: 10;
  top: 330px;
  left: 40px;
}
.right {
  z-index: 10;
  top: 330px;
  left: 1210px;
}
.b {
  top: 282px;
  left: 240px;
}
.p {
  top: 268px;
  left: 478px;
}
.m {
  top: 280px;
  left: 675px;
}
.f {
  top: 295px;
  left: 893px;
}
</style>
